<template>
  <div class="bg-f2 userBox">
    <div class="bg-f2 bg-fff">
      <Addji :ruleForm="ruleForm2" @guanbi="tjiao($event)"></Addji>
      <ul class="btn_header">
        <li>
          <el-button type="success" class="max_btn btnSizeStyle" icon="el-icon-plus" @click="modifyClick('添加机构')" :disabled="quanxianBtns.btn1">添加机构</el-button>
        </li>
        <li>
          <div class="select">
            <span>机构类型：</span>
            <el-select v-model.trim="roleList" :no-data-text="tiText1" clearable placeholder="机构类型">
              <el-option v-for="item in optionsjglx" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
        </li>
        <li>
          <el-input v-model.trim="unitList" clearable prefix-icon="el-icon-search" placeholder="机构名称、联系人、电话" class="search_btn"></el-input>
        </li>
        <li>
          <el-button type="primary" class="max_btn2 btnSizeStyle" @click="searchBtn2()">查询</el-button>
        </li>
      </ul>
      <el-drawer title="我是添加部门" class="drawerScroll" :visible.sync="increased2" :with-header="false" :wrapperClosable="false">
        <div class="addUer_title">
          <span>{{ Bmtitle }}</span>
          <i class="el-icon-close addUer_icon" @click="offDrawer2('BmruleForm')"></i>
        </div>
        <el-form :model="BmruleForm" class="drawerContent" :rules="Bmrules" ref="BmruleForm" label-width="130px">
          <el-row>
            <el-col :span="23">
              <el-form-item label="部门名称：" prop="jgbmmc">
                <el-input v-model.trim="BmruleForm.jgbmmc" clearable placeholder="部门名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="forms_fooer">
            <!-- <el-button
            class="users_btn"
            @click="Preservation('BmruleForm', Bmtitle)"
            v-show="Bmtitle !== '编辑部门' ? true : false"
            v-preventReClick
            >保存并新增</el-button>-->
            <el-button class="btnSizeStyle" @click="offDrawer2('BmruleForm')">取消</el-button>
            <el-button type="primary" class="btnSizeStyle" @click="BmsubmitForm('BmruleForm', Bmtitle)" v-preventReClick>确定</el-button>
          </div>
        </el-form>
      </el-drawer>
      <el-drawer title="我是添加子部门" class="drawerScroll" :visible.sync="increased3" :with-header="false" :wrapperClosable="false">
        <div class="addUer_title">
          <span>{{ ziBmtitle }}</span>
          <i class="el-icon-close addUer_icon" @click="offDrawer3('BmruleForm')"></i>
        </div>
        <el-form :model="ziBmruleForm" class="drawerContent" :rules="ziBmrules" ref="ziBmruleForm" label-width="130px">
          <el-row>
            <el-col :span="23">
              <el-form-item label="部门名称：" prop="jgbmmc">
                <el-input v-model.trim="ziBmruleForm.jgbmmc" clearable placeholder="部门名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="forms_fooer">
            <!-- <el-button
            class="users_btn"
            @click="Preservation2('ziBmruleForm', ziBmtitle)"
            v-show="ziBmtitle !== '编辑子部门' ? true : false"
            v-preventReClick
            >保存并新增</el-button>-->
            <el-button class="btnSizeStyle" @click="offDrawer3('BmruleForm')">取消</el-button>
            <el-button type="primary" class="btnSizeStyle" @click="BmsubmitForm2('ziBmruleForm', ziBmtitle)" v-preventReClick>确定</el-button>
          </div>
        </el-form>
      </el-drawer>
      <el-table
        border
        stripe
        :data="rolelist"
        highlight-current-row
        @expand-change="tabsChange"
        :row-key="getRowKeys"
        :expand-row-keys="expands"
        :row-class-name="getRowClass"
        @row-dblclick="rowClick"
        :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
        v-loading="tableLoad"
        @sort-change="sortthiscolumn"
      >
        <!-- :default-sort="{ prop: 'date', order: 'null' }" -->
        <!-- 提示语句 -->
        <template slot="empty">{{ tableMessage }}</template>

        <el-table-column type="expand">
          <template>
            <el-tree :data="dataBm" node-key="id" :expand-on-click-node="true" icon-class="el-icon-arrow-right" :default-expanded-keys="sxsj" style="margin-left: 15px; width: 100%">
              <span class="column_item" slot-scope="{ node, data }">
                <span class="ellips">{{ node.label }}</span>
                <span>
                  <el-tag type="success" size="small">部门</el-tag>
                </span>
                <span>{{ data.tjsj }}</span>
                <span>
                  <el-button type="text" :disabled="quanxianBtns.btn4" v-show="data.bmfid > 0 ? false : true" @click="addzhiBMClick('添加子部门', data)">添加子部门</el-button>
                  <span class="operation" v-show="data.bmfid > 0 ? false : true"></span>
                  <el-button type="text" :disabled="quanxianBtns.btn5" @click="addzhiBMClick('编辑子部门', data)">编辑</el-button>
                  <span class="operation"></span>
                  <el-button type="text" class="color_f56f6f" :disabled="quanxianBtns.btn6" @click="remove(node, data)">删除</el-button>
                </span>
              </span>
            </el-tree>
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" min-width="50" align="center"></el-table-column>
        <el-table-column label="机构名称" prop="jgmc" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="类型" prop="zzjglx" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="联系人" prop="lxr"></el-table-column>
        <el-table-column label="联系电话" prop="lxrdh"></el-table-column>
        <el-table-column label="地址" prop="dz" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.sfmc + scope.row.csmc + scope.row.qxmc + scope.row.xzjdmc + scope.row.dz }}</template>
        </el-table-column>
        <el-table-column label="法定代表人" prop="fr"></el-table-column>
        <el-table-column label="备注" prop="bz"></el-table-column>
        <el-table-column label="添加人" prop="createBy" min-width="100"></el-table-column>
        <el-table-column label="添加时间" sortable prop="tjsj" min-width="150">
          <template slot-scope="scope">{{ scope.row.tjsj | dateFormat }}</template>
        </el-table-column>
        <el-table-column label="操作" align="right" min-width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" :disabled="quanxianBtns.btn4" @click="operationClick('添加部门', scope.row)">添加部门</el-button>
            <span class="operation"></span>
            <el-button type="text" size="small" :disabled="quanxianBtns.btn2" @click="modifyClick('编辑机构', scope.row)">编辑</el-button>
            <span class="operation" v-show="scope.row.scbs - '' === 0 ? true : false"></span>
            <el-button type="text" size="small" v-show="scope.row.scbs - '' === 0 ? true : false" :disabled="quanxianBtns.btn3" @click="deleteClick(scope.row)" class="color_f56f6f">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <span>删除</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" class="btnSizeStyle">取 消</el-button>
          <el-button type="primary" @click="isDelete" v-preventReClick class="btnSizeStyle">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="提示" :visible.sync="zidialogVisible" width="30%">
        <span>删除子部门</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="zidialogVisible = false" class="btnSizeStyle">取 消</el-button>
          <el-button type="primary" @click="isDelete2" v-preventReClick class="btnSizeStyle">确 定</el-button>
        </span>
      </el-dialog>
      <div class="fooer_box">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
// import { getUrl } from '../../utils/getUrl.js'
import { pinT } from '@/utils/allUrl.js'
// import { endLoading } from '@/utils/loading.js'
import { getUrl } from '../../utils/getUrl.js'
import Addji from './addjigou'
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
export default {
  data: function () {
    return {
      // 添加部门
      increased2: false,
      // 添加子部门
      increased3: false,
      zidialogVisible: false, // 删除子部门
      // 添加机构编辑机构绑定值
      ruleForm2: {
        title2: '',
        // city2: '',
        increased2: false,
        jgmc2: '',
        jglx2: [],
        lxr2: '',
        lxrdh2: '',
        selectArea2: [],
        dz2: '',
        fr2: '',
        jj2: '',
        jyfw2: '',
        bz2: '',
        id: '',
      },
      // 添加部门绑定值
      BmruleForm: {
        jgbmmc: '',
        zzjgid: '',
        id: '',
      },
      Bmrules: {
        jgbmmc: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' },
          { pattern: /^([^\*\#\$\%\【\】\!\！\@\￥\$\[\]\{\}\^\&\*\`\~\"\'<>\/])+$/g, message: '不能输入特殊字符', trigger: 'blur' },
        ],
      },
      // 添加子部门绑定值
      ziBmruleForm: {
        jgbmmc: '',
        zzjgid: '',
        id: '',
      },
      ziBmrules: {
        jgbmmc: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' },
          { pattern: /^([^\*\#\$\%\【\】\!\！\@\￥\$\[\]\{\}\^\&\*\`\~\"\'<>\/])+$/g, message: '不能输入特殊字符', trigger: 'blur' },
        ],
      },
      dataBm: [], // 部门tree
      rolelist: [], // 组织机构数据源
      optionsjglx: [], // 机构
      // Cityoptions: [], // 城市
      currentPage: 1, // 当前页
      pageSize: 10, // 显示页数
      unitList: '', // 搜索联系人机构名称
      roleList: '', // 搜索机构类型
      total: 0, // 总条数
      dialogVisible: false, // 删除对话框
      deleteId: '', // 删除id
      title: '', // 新增编辑标题名
      Bmtitle: '', // 部门标题
      ziBmtitle: '', // 子部门标题
      addBumeId: '', // 添加部门ID
      ziDeteleId: '', // 删除子部门id
      // 行数据的Key
      getRowKeys(row) {
        return row.id
      },
      expands: [], // 通过该属性设置Table目前的展开行，需要设置row-key属性才能使用，该属性为展开行的keys数组
      sxsj: [],
      quanxianBtns: {
        btn1: true,
        btn2: true,
        btn3: true,
        btn4: true,
        btn5: true,
        btn6: true,
      },
      tableLoad: false,
      tableTimer: null,
      tableMessage: '',
      tiText1: '暂无数据',
      listQuery: {
        sortby: '',
        order: '',
      },
    }
  },
  watch: {
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.rolelist = []
          this.tableMessage = tableMessageText
          // this.total = 0
        }
      }, timeLoad)
    },
  },
  components: { Addji },
  created: function () {
    this.jurisdictionBtn()
    this.getList() // 获取组织机构数据
    this.getjglx() // 获取机构类型
    // 获取城市地址
    // this.Cityoptions = JSON.parse(getUrl('CityList1'))
  },
  methods: {
    sortthiscolumn(column) {
      // 排序
      this.tableLoad = true // 加载中样式
      if (column.order === 'descending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'DESC' // 降序
      } else if (column.order === 'ascending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'ASC' // 升序
      } else {
        this.listQuery.sortby = ''
        this.listQuery.order = '' // 没有排序
      }
      this.searchBtn()
    },
    // 获取按钮权限
    jurisdictionBtn() {
      const menus = JSON.parse(getUrl('jurisdiction'))
      menus.forEach((item) => {
        if (item.qxdm === 'PTPZ_ZZJG_ZZJGLB') {
          item.children.forEach((item2) => {
            if (item2.qxdm === 'zzjg:create') {
              this.quanxianBtns.btn1 = false // 组织机构新增
            } else if (item2.qxdm === 'zzjg:update') {
              this.quanxianBtns.btn2 = false // 组织机构修改
            } else if (item2.qxdm === 'zzjg:delete') {
              this.quanxianBtns.btn3 = false // 组织机构删除
            } else if (item2.qxdm === 'bm:create') {
              this.quanxianBtns.btn4 = false // 部门新增
            } else if (item2.qxdm === 'bm:update') {
              this.quanxianBtns.btn5 = false // 部门修改
            } else if (item2.qxdm === 'bm:delete') {
              this.quanxianBtns.btn6 = false // 部门删除
            }
          })
        }
      })
    },
    tjiao(val) {
      if (val) {
        this.getList()
      }
      this.ruleForm2 = {
        title2: '',
        // city2: '',
        increased2: val.type,
        jgmc2: '',
        jglx2: [],
        lxr2: '',
        lxrdh2: '',
        selectArea2: [],
        dz2: '',
        fr2: '',
        jj2: '',
        jyfw2: '',
        bz2: '',
        id: '',
      }
    },
    // 获取数据
    getList() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const params = new URLSearchParams()
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      this.setList(params)
    },
    async setList(params) {
      const { data: res } = await this.$http.post(`${pinT}zzjg/list`, params)
      switch (res.code) {
        case '0000':
          res.data.list.forEach((item) => {
            const ssjs = Object.values(item.zzjglx).join(',')
            item.zzjglx = ssjs
          })
          this.rolelist = res.data.list
          this.total = res.data.countList
          break
        default:
          this.rolelist = []
          this.total = 0
          this.tableMessage = res.message
          break
      }
      this.tableLoad = false // 表格加载中样式
    },
    // 获取机构类型
    async getjglx() {
      const { data: res } = await this.$http.post(`${pinT}jglx/list`)
      if (res.code !== '0000') {
        this.optionsjglx = []
        this.tiText1 = res.message
      } else {
        res.data.list.forEach((item) => {
          const k = {
            value: item.id,
            label: item.flmc,
          }
          this.optionsjglx.push(k)
        })
      }
    },
    operationClick(title, scope) {
      if (title === '添加部门') {
        this.addBumeId = scope.id
      } else {
        this.BmruleForm.jgbmmc = scope.label
        this.BmruleForm.zzjgid = scope.zzjgid
        this.BmruleForm.id = scope.id
      }
      this.Bmtitle = title
      this.increased2 = true
    },
    handleSizeChange(newsize) {
      this.currentPage = 1
      this.pageSize = newsize
      this.searchBtn()
    },
    handleCurrentChange(newnum) {
      this.currentPage = newnum
      this.searchBtn()
    },
    offDrawer2(BmruleForm) {
      this.$refs.BmruleForm.resetFields()
      this.increased2 = false
    },
    offDrawer3(ziBmruleForm) {
      this.$refs.ziBmruleForm.resetFields()
      this.increased3 = false
    },
    // 新增保存
    // Preservation(BmruleForm, title) {
    //   const { jgbmmc } = this.BmruleForm
    //   const params = new URLSearchParams()
    //   params.append('jgbmmc', jgbmmc)
    //   params.append('zzjgid', this.addBumeId)
    //   this.$refs.BmruleForm.validate(async valid => {
    //     if (valid) {
    //       if (title === '添加部门') {
    //         const { data: res } = await this.$http.post(`${pinT}bm/create`, params)
    //         if (res.code === '0014') {
    //           return
    //         } else if (res.code !== '0000') {
    //           return this.$message({
    //             type: 'error',
    //             message: res.message,
    //             center: true
    //           })
    //         }
    //         this.$message({
    //           type: 'success',
    //           message: res.message,
    //           center: true
    //         })
    //         this.$refs.BmruleForm.resetFields()
    //         this.getList()
    //         this.expands = []
    //         this.sxsj = [this.addBumeId]
    //       }
    //     } else {
    //       return this.$message({
    //         type: 'error',
    //         message: '请填写正确的信息',
    //         center: true
    //       })
    //     }
    //   })
    // },
    // 新增保存
    // Preservation2(ziBmruleForm, title) {
    //   const { jgbmmc, zzjgid, id } = this.ziBmruleForm
    //   const params = new URLSearchParams()
    //   params.append('jgbmmc', jgbmmc)
    //   params.append('zzjgid', zzjgid)
    //   params.append('bmfid', id)
    //   this.$refs.ziBmruleForm.validate(async valid => {
    //     if (valid) {
    //       if (title === '添加子部门') {
    //         const { data: res } = await this.$http.post(`${pinT}bm/create`, params)
    //         if (res.code === '0014') {
    //           return
    //         } else if (res.code !== '0000') {
    //           return this.$message({
    //             type: 'error',
    //             message: res.message,
    //             center: true
    //           })
    //         }
    //         this.$message({
    //           type: 'success',
    //           message: res.message,
    //           center: true
    //         })
    //         this.$refs.ziBmruleForm.resetFields()
    //         this.getList()
    //         this.expands = []
    //         this.sxsj = [id]
    //       }
    //     } else {
    //       return this.$message({
    //         type: 'error',
    //         message: '请填写正确的信息',
    //         center: true
    //       })
    //     }
    //   })
    // },
    BmsubmitForm2(ziBmruleForm, title) {
      this.$refs.ziBmruleForm.validate(async (valid) => {
        if (valid) {
          if (title === '添加子部门') {
            const { jgbmmc, zzjgid, id } = this.ziBmruleForm
            const params = new URLSearchParams()
            params.append('jgbmmc', jgbmmc)
            params.append('zzjgid', zzjgid)
            params.append('bmfid', id)
            const { data: res } = await this.$http.post(`${pinT}bm/create`, params)
            if (res.code === '0014') {
              return
            } else if (res.code !== '0000') {
              return this.$message({
                type: 'error',
                message: res.message,
                center: true,
              })
            }
            this.$message({
              type: 'success',
              message: res.message,
              center: true,
            })
            this.increased3 = false
            this.$refs.ziBmruleForm.resetFields()
            this.getList()
            this.expands = []
            this.sxsj = [id]
          } else {
            const { jgbmmc, zzjgid, id } = this.ziBmruleForm
            const params2 = new URLSearchParams()
            params2.append('jgbmmc', jgbmmc)
            params2.append('zzjgid', zzjgid)
            params2.append('id', id)
            const { data: res } = await this.$http.post(`${pinT}bm/update`, params2)
            if (res.code === '0014') {
              return
            } else if (res.code !== '0000') {
              return this.$message({
                type: 'error',
                message: res.message,
                center: true,
              })
            }
            this.$message({
              type: 'success',
              message: res.message,
              center: true,
            })
            this.increased3 = false
            this.$refs.ziBmruleForm.resetFields()
            this.getList()
            this.expands = []
            this.sxsj = [id]
          }
        } else {
          return this.$message({
            type: 'error',
            message: '请填写正确的信息',
            center: true,
          })
        }
      })
    },
    BmsubmitForm(BmruleForm, title) {
      this.$refs.BmruleForm.validate(async (valid) => {
        if (valid) {
          if (title === '添加部门') {
            const { jgbmmc } = this.BmruleForm
            const params = new URLSearchParams()
            params.append('jgbmmc', jgbmmc)
            params.append('zzjgid', this.addBumeId)
            const { data: res } = await this.$http.post(`${pinT}bm/create`, params)
            if (res.code === '0014') {
              return
            } else if (res.code !== '0000') {
              return this.$message({
                type: 'error',
                message: res.message,
                center: true,
              })
            }
            this.$message({
              type: 'success',
              message: res.message,
              center: true,
            })
            this.$refs.BmruleForm.resetFields()
            // this.tabsChange(null, [], this.addBumeId)
            this.getList()
            this.increased2 = false
            this.expands = []
          }
          // else {
          //   const { jgbmmc, zzjgid, id } = this.BmruleForm
          //   const params2 = new URLSearchParams()
          //   params2.append('jgbmmc', jgbmmc)
          //   params2.append('id', id)
          //   params2.append('zzjgid', zzjgid)
          //   const { data: res } = await this.$http.post('ptpz/bm/update', params2)
          //   if (res.code !== '0000') {
          //     return this.$message({
          //       type: 'error',
          //       message: '修改失败',
          //       center: true
          //     })
          //   }
          //   this.$message({
          //     type: 'success',
          //     message: '修改成功',
          //     center: true
          //   })
          //   this.$refs.BmruleForm.resetFields()
          //   // this.tabsChange(null, [], zzjgid)
          //   this.getList()
          //   this.increased2 = false
          // }
        } else {
          return this.$message({
            type: 'error',
            message: '请填写正确的信息',
            center: true,
          })
        }
      })
    },
    // 展开获取部门
    tabsChange(selection, evt) {
      const a = this.expands.findIndex((item) => item === selection.id)
      if (a !== -1) {
        this.expands.splice(a, 1)
      } else {
        this.expands = []
        if (selection) {
          this.expands.push(selection.id)
        }
      }
      const la = JSON.stringify(selection.bmList).replace(/jgbmmc/g, 'label')
      this.dataBm = JSON.parse(la)
    },
    deleteClick(scope) {
      if (scope.bmList === null || scope.bmList.length <= 0) {
        this.deleteId = scope.id
        this.dialogVisible = true
      } else {
        this.$message({
          type: 'error',
          message: '操作失败,该机构下有绑定部门，请先解绑！',
          center: true,
        })
      }
    },
    // 删除
    async isDelete() {
      this.dialogVisible = false
      const params = new URLSearchParams()
      params.append('id', this.deleteId)
      const { data: res } = await this.$http.post(`${pinT}zzjg/delete`, params)
      if (res.code === '0014') {
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.$message({
        type: 'success',
        message: res.message,
        center: true,
      })
      this.getList()
    },
    // 添加修改
    modifyClick(title, scope) {
      if (scope) {
        const arr = []
        // this.ruleForm2 = scope
        // this.ruleForm2.selectArea2 = scope.xzjd
        // this.ruleForm2.jgmc2 = scope.jgmc
        // this.ruleForm2.city2 = scope.sfmc + scope.csmc + scope.qxmc + scope.xzjdmc
        if (scope.zzjglx) {
          let js = scope.zzjglx.split(',')
          if (js.length === 1 && js[0] === '') {
            js = ''
          }
          this.optionsjglx.forEach((item, index) => {
            js.forEach((item2) => {
              if (item.label === item2) {
                arr.push(item.value)
              }
            })
          })
        }
        // let citys = ''
        // if (scope.sfmc || scope.csmc || scope.qxmc || scope.xzjdmc) {
        //   citys = scope.sfmc + ' / ' + scope.csmc + ' / ' + scope.qxmc + ' / ' + scope.xzjdmc
        // } else {
        //   citys = ''
        // }
        this.ruleForm2 = {
          // city2: citys,
          jgmc2: scope.jgmc || '',
          jglx2: arr || [],
          lxr2: scope.lxr || '',
          lxrdh2: scope.lxrdh || '',
          selectArea2: scope.xzjd || [],
          dz2: scope.dz || '',
          fr2: scope.fr || '',
          jj2: scope.jj || '',
          jyfw2: scope.jyfw || '',
          bz2: scope.bz || '',
          id: scope.id,
        }
      } else {
        this.ruleForm2 = {
          // city2: '',
          jgmc2: '',
          jglx2: [],
          lxr2: '',
          lxrdh2: '',
          selectArea2: [],
          dz2: '',
          fr2: '',
          jj2: '',
          jyfw2: '',
          bz2: '',
          id: '',
        }
      }
      this.ruleForm2.title2 = title
      this.ruleForm2.increased2 = true
    },
    searchBtn2() {
      this.currentPage = 1
      this.pageSize = 10
      this.searchBtn()
    },
    // 搜索
    async searchBtn() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const params = new URLSearchParams()
      params.append('jgmc_lxr_lxrdh', this.unitList)
      params.append('jglx', this.roleList)
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      params.append('order', this.listQuery.sortby) // 排序字段
      params.append('sort', this.listQuery.order) // DESC降序 ASC升序
      this.setList(params)
    },
    addzhiBMClick(title, data) {
      if (title === '添加子部门') {
        this.ziBmruleForm = data
      } else {
        this.ziBmruleForm.jgbmmc = data.label
        this.ziBmruleForm.zzjgid = data.zzjgid
        this.ziBmruleForm.id = data.id
      }
      this.ziBmtitle = title
      this.increased3 = true
    },
    remove(m, l) {
      if (l.children === null || l.children.length <= 0) {
        this.ziDeteleId = l.id
        this.zidialogVisible = true
      } else {
        this.$message({
          type: 'error',
          message: '操作失败,该部门下有绑定子部门，请先解绑！',
          center: true,
        })
      }
    },
    // 删除子部门
    async isDelete2() {
      this.zidialogVisible = false
      const params = new URLSearchParams()
      params.append('id', this.ziDeteleId)
      const { data: res } = await this.$http.post(`${pinT}bm/delete`, params)
      if (res.code === '0014') {
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.$message({
        type: 'success',
        message: res.message,
        center: true,
      })
      this.expands = []
      this.getList()
    },
    // 展开
    rowClick(row, column, event) {
      this.tabsChange(row)
    },
    // 判断表格是否有子项，无子项不显示展开按钮
    getRowClass({ row, rowIndex }) {
      if (!row.bmList || row.bmList.length <= 0) {
        return 'row-expand-cover'
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.userBox {
  // margin-top: 15px;
  .btn_header {
    height: 35px;
    line-height: 33px;
    > li:first-child {
      margin-left: 0;
    }
    > li {
      float: left;
      margin-left: 10px;
    }
    .select {
      > span {
        font-weight: 600;
      }
      > .el-select {
        width: 200px;
        height: 30px;
      }
      .select2 {
        width: 84px;
      }
    }

    .max_btn {
      width: 105px;
      padding: 0;
    }
    .search_btn {
      width: 200px !important;
    }
  }
  .el-table {
    margin-top: 15px;
    border: 1px solid #eaeaea;
    border-bottom: 0;
    .minImg {
      margin-right: 5px;
    }
    .operation {
      display: inline-block;
      margin: 0 5px;
      height: 10px;
      border-left: 1.5px solid #b3b3b3;
    }
  }
  .column_item {
    display: inline-block;
    width: 100%;
    padding-right: 10px;
    height: 40px;
    line-height: 40px;
    position: relative;
    > span {
      float: left;
    }
    > span:nth-child(1) {
      margin-left: 1.2%;
      width: 160px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    > span:nth-child(2) {
      position: absolute;
      left: 12.2%;
    }
    > span:nth-child(3) {
      position: absolute;
      left: 62.6%;
    }
    > span:nth-child(4) {
      // float: right;
      position: absolute;
      right: 1.5%;
    }
  }
  .fooer_box {
    height: 48px;
    line-height: 48px;
    padding: 0 15px;
    box-sizing: border-box;
    border-top: none;
    border: 1px solid #eaeaea;
    border-top: 0;
    display: flex;
    justify-content: flex-end;
    .el-pagination {
      padding: 6px 5px;
    }
  }
  .el-drawer {
    .addUer_title {
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      height: 61px;
      line-height: 61px;
      border-bottom: 1px solid #ededed;
      box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.8);
      > span {
        font-size: 18px;
        font-weight: 600;
      }
      .addUer_icon {
        font-size: 20px;
        font-weight: 700;
        display: flex;
        flex-flow: column;
        justify-content: center;
        cursor: pointer;
      }
    }
    .el-row {
      margin-top: 30px;
      .select_width {
        width: 50%;
      }
    }
    #phones_btn {
      margin-left: 10px;
      padding: 0;
      width: 98px;
      height: 34px;
    }
    .forms_fooer {
      position: absolute;
      bottom: 0;
      width: 100%;
      display: flex;
      justify-content: flex-end;
      padding: 0 20px;
      box-sizing: border-box;
      align-items: center;
      height: 61px;
      line-height: 61px;
      border-top: 1px solid #ededed;
      background-color: #ffffff;
      .users_btn {
        padding: 0 10px;
        height: 36px;
      }
    }
  }
}
::v-deep .el-table__expanded-cell {
  padding: 0 0 0 50px !important;
}
</style>
